<template>
  <view class="login-logo">
    <image
      src="https://alixeu-test.oss-cn-guangzhou.aliyuncs.com/achobate/AchoBeta_logo.png"
      mode=""
    ></image>
  </view>

  <view class="login-btns">
    <view class="login-btn" @click="login_btn">
      <image
        src="https://alixeu-test.oss-cn-guangzhou.aliyuncs.com/achobate/wechatLogo.png"
      ></image>
      <a>微信登陆</a>
    </view>
    <view class="login-out-btn">
      <a>暂不登录</a>
    </view>
    <view class="check-word">
      <checkbox :value="checkConfirm" @click="checkBtn" />
      <text>登录即表明您同意我们的</text>
      <text class="color-word">《服务协议》</text>
    </view>
  </view>

  <u-modal v-model="alertShow" :content="description"></u-modal>
</template>

<script setup>
import { ref } from 'vue'
import { useMainStore } from '@/stores/index.js'
import { useUserStore } from '@/stores/modules/login.js'
import { loginFn, getUserId } from '../../utils/modules/login.js'
try {
  uni.removeStorageSync('token')
  uni.removeStorageSync('oid')
} catch (err) {
  console.log(err)
}
const checkConfirm = ref(false)
const mainStore = useMainStore()
const userStore = useUserStore()
const alertTitle = ref('提示')
const description = ref('请先同意《服务协议》')
const alertShow = ref(false)
const storageOid = ref('')
const token = ref('')
checkToken()

function checkBtn() {
  checkConfirm.value = !checkConfirm.value
  console.log(checkConfirm.value)
}

function checkToken() {
  token.value = uni.getStorageSync('token')
  if (token.value) {
    uni.reLaunch({
      url: '/pages/index/index'
    })
  }
}
const secretValFrist = ref('284e58445ad9ffe77')
const secretValLast = ref('bf02a1d77a9c8a2')
// secretVal.value = 
function login_btn(oid) {
  if (checkConfirm.value) {
    uni.removeStorageSync('token')
  uni.removeStorageSync('oid')
    uni.login({
      provider: 'weixin',
      //请求到openid并将openid存储在Storage中
      success: function (res) {
        //     //小程序appid
        let appid = 'wx7c19e9a830cb3e8f'
        //     //小程序secret
        let secret = secretValFrist.value + secretValLast.value
        let url =
          'https://api.weixin.qq.com/sns/jscode2session?appid=' +
          appid +
          '&secret=' +
          secret +
          '&js_code=' +
          res.code +
          '&grant_type=authorization_code'
        uni.request({
          //请求到openid并将openid存储在Storage中
          url: url,
          success: (result) => {
            //将oid存储在Storage中
            uni.setStorage({
              key: 'oid',
              data: result.data.openid
            })
            userStore.openid = result.data.openid
          }
        })
        uni.getStorage({
          key: 'token',
          success: function (res) {
            token.value = res.data
            userStore.token = res.data
          }
        })
      }
    })
    uni.getStorage({
      key: 'oid',
      success: function (res) {
        storageOid.value = res.data
        userStore.openid = res.data
      }
    })

    //调用登陆接口 请求到token并存储在Storage中
    loginFn({
      openid: 123456
    }).then((res) => {
      uni.setStorage({
        //将oid存储在Storage中
        key: 'token',
        data: res.data.data
      })
      userStore.token = res.data.data
    })

    return new Promise((resolve, reject) => {
      uni.getUserProfile({
        lang: 'zh_CN',
        desc: '用户登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，
        success: (res) => {
          console.log(res.userInfo, 'resss')
          userStore.nickName = res.userInfo.nickName
          userStore.avatarUrl = res.userInfo.avatarUrl
          resolve(res.userInfo)
          getUserId().then((res) => {
        console.log(res.data.data.userId);
        user
      })
          uni.reLaunch({
            url: '/pages/index/index'
          })
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
    // }
  } else {
    alertShow.value = true
  }
}
console.log(checkConfirm.value)
</script>

<style lang="scss" scoped>
.alertBlock {
  z-index: 999999;
  position: fixed;
  // align-items: center;
  margin-left: 35%;
  height: 200rpx;
}

.login-logo {
  width: 50%;
  height: 300rpx;
  margin-top: 120rpx;
  margin-left: 25%;

  image {
    width: 100%;
    height: 100%;
    border-radius: 30rpx;
  }
}

.login-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 15%;
  flex-direction: column;

  .login-btn {
    display: flex;
    background-color: #4cd964;
    height: 100rpx;
    width: 300rpx;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 35rpx;
    border-radius: 10rpx;

    image {
      height: 80%;
      width: 25%;
    }
  }

  .login-out-btn {
    margin-top: 20rpx;
    display: flex;
    // background-color: #c7c7c7;
    border: 1rpx solid #c7c7c7;
    height: 100rpx;
    width: 300rpx;
    justify-content: center;
    align-items: center;
    color: #c7c7c7;
    font-size: 35rpx;
    border-radius: 10rpx;
    font-weight: 600;
  }
}

.check-word {
  width: 65%;
  height: 50rpx;
  font-size: 25rpx;
  margin-top: 40rpx;

  .color-word {
    color: #4cd964;
  }
}
</style>
